@import  'func.sass';
@import 'vars.sass';


html,body
    margin: 0px
    padding: 0px
    width: 100%
    height: 100%
    font-size: $font-size-main
    color: $text-regular

input,select
    box-sizing: border-box
    height: 25px
    float: left

.text

    &-empty
        color: $text-secondary
        width: 100%
        box-sizing: border-box
        padding: 10px

// 页面主容器
.main-container
    @include flex-align(flex-start, flex-start)
    flex-direction: column
    width: 100%
    height: 100%
    background-color: $bg-normal
    // 顶栏
    .header
        @include flex-align(flex-start, space-between)
        flex-direction: row
        width: 100%
        height: 60px
        display: flex
        border-bottom: 1px solid $border-base
        // 顶部菜单栏
        &-tab-item
            @include flex-align(center, flex-start)
            flex-direction: column
            height: 100%
            display: flex
            flex: 1

            .icon
                height: 40px
                width: 100%
                @include flex-align(center, center)
                pointer-events: none

                svg 
                    width: 24px
                    height: 24px
                    fill: $bg-main
                    
            .title
                display: flex
                flex: 1
                pointer-events: none
            
            &-active,&:hover
                cursor: pointer

                & > .icon svg
                    fill: $color-primary
                
                & > .title
                    color: $text-primary
        
    // 主题区域
    .main
        width: 100%
        display: flex
        flex: 1
        box-sizing: border-box
        padding: 3px
        overflow: hidden

        .content
            width: 100%
            height: 100%
            overflow: hidden
            @include flex-align(center,center)
            background-color: $bg-normal
            border-radius: 0px 0px 5px 5px
            box-sizing: border-box

            // 用户关注
            &-rule
                @include flex-align(center, center)
                flex-direction: row

                .rule-list
                    @include flex-align(flex-start, center)
                    flex-direction: column
                    width: 140px
                    height: 100%
                    max-height: 100%
                    display: flex
                    border-right: 1px solid $border-base

                    .data-list
                        @include flex-align(flex-start, flex-start)
                        flex-direction: column
                        flex: 1
                        display: flex
                        width: 100%
                        height: 100%
                        max-height: 100%
                        overflow-y: auto
                        position: relative

                        &-item
                            @include flex-align(flex-start, flex-start)
                            flex-direction: column
                            width: 100%
                            height: 40px
                            position: relative
                            float: left
                            background: $bg-normal
                            box-sizing: border-box
                            padding: 3px 5px
                            border-bottom: 1px solid $border-light

                            &:hover
                                cursor: pointer
                            &-active
                                cursor: pointer
                                color: $text-select
                                background-color: $color-primary
                            
                            &:last-child
                                border-bottom: none
                            
                            .rule-name
                                @include flex-align(flex-start, space-between)
                                flex-direction: row
                                width: 100%
                    
                    .operation-area
                        position: relative
                        height: 18px
                        width: 100%
                        display: flex
                        border-top: 1px solid $border-base

                        .icon-btn
                            position: relative
                            float: left
                            width: 18px
                            height: 100%
                            border-right: 1px solid $border-base
                            text-align: center
                            box-sizing: border-box

                            svg
                                width: 100%
                                height: 100%
                                fill: $bg-main
                                display: block
                        
                            &:last-child
                                border-left: none
                        
                        &:hover
                            cursor: pointer

                .rule-form
                    flex: 1
                    height: 100%

                    .detail-area
                        width: 100%
                        height: 100%

                        img
                            width: 100%
                            height: 100%;
                            position: relative;
                            float: left;
            
            // 服务器配置
            &-config
            
            // 支持我们
            &-support
                
            // 关于我们
            &-us


    .form-area
        @include flex-align(flex-start, flex-start)
        flex-direction: column
        width: 100%
        height: 100%
        box-sizing: border-box
        padding: 10px
        overflow-y: auto

        .card
            width: 100%
            height: auto
            border: 1px solid $border-base
            border-radius: 10px
            padding: 5px
            padding-left: 14px
            box-sizing: border-box
            margin-bottom: 16px
        
        .btn-area
            @flex-align(flex-start, center)
            flex-direction: row
            width: 100%
            height: auto

        button
            border: none;
            padding: 5px;
            padding-left: 10px;
            padding-right: 10px;
            outline: none;

            &:hover
                background: $bg-normal
                cursor: pointer
        
        h4
            text-align: left;
            margin-top: -14px;
            background: $bg-normal;
            width: 60px;
            margin-left: 2px
        
        &-config
            padding-left: 100px
            padding-top: 20px

        &-item
            width: 100%
            min-height: 28px
            position: relative

            .cel
                position: relative
                width: auto
                float: left
                line-height: 28px

                span
                    color: #000
                    float: left

                .lg-input
                    margin-left: 5px
                    margin-right: 5px
                    width: 146px

                .lg-select
                    width: 80px
                
                .search-input
                    position: absolute
                

                .search-select
                    position: absolute
                    min-height: 24px
                    margin-left: 5px
                    margin-right: 5px
                    width: 146px
                    height: auto
                    top: 22px
                    background-color: $bg-normal
                    border: 1px solid #999898
                    z-index: 2
                    box-sizing: border-box

                    &-option
                        position: relative
                        width: 100%
                        height: 24px
                        lihe-height: 24px
                        float: left
                        border-bottom: 1px solid $border-base
                        box-sizing: border-box
                        padding-left: 5px

                        &:last-child
                            border-bottom: none

                        &:hover
                            background-color: $bg-normal
                            cursor: pointer
                    

                .sl-input
                    margin-left: 5px
                    margin-right: 5px
                    width: 40px


    
